{% extends "mall/base.html" %}

{% block title %}
    {{ title }}
{% endblock %}

{% block css %}
    <link rel="stylesheet" href="{{ STATIC_URL }}/static/css/mall/order-detail.css?v={{ version_code }}">
{% endblock %}

{% block header %}
{% endblock %}

{% block content %}
    <input type="hidden" name="order_id" value="{{ order_id }}">
    <div class="order success">
        <div class="order-line-border">
            <li class="line-area order-main">

                <dl class="info-line">
                    <dd class="info-element station-name">订单详情</dd>
                    <dt class="info-label first-line">订 单 号：</dt>
                    <dd class="info-element">{{ order_id }}</dd>

                </dl>
                <dl class="info-line">
                    <dt class="info-label">下单时间：</dt>
                    <dd class="info-element">{{ create_time }}</dd>
                </dl>
                <dl class="info-line">
                    <dt class="info-label">应付金额：</dt>
                    <dd class="info-element"><span class="highlight price">￥{{ order_fee }}</span>共&nbsp;<span
                            class="highlight">{{ goods_count }}</span>&nbsp;件
                    </dd>
                </dl>
                <dl class="info-line">
                    <dt class="info-label">余额抵扣：</dt>
                    <dd class="info-element">{{ balance_fee }}</dd>
                </dl>
                <dl class="info-line">
                    <dt class="info-label first-line">订单类型：</dt>
                    <dd class="info-element">
                        {% if per_order_type == 2 %}
                            礼品订单
                        {% else %}
                            普通订单
                        {% endif %}
                    </dd>
                </dl>
                <dl class="info-line">
                    <dt class="info-label">订单状态：</dt>
                    <dd class="info-element">{{ status }}</dd>
                </dl>
                <dl class="info-line">
                    <dt class="info-label">支付状态：</dt>
                    <dd class="info-element">{{ pay_status }}</dd>
                </dl>
                {% if per_order_type == 2 %}
                    <dl>
                        {% if status == "待发货" or status == "已发货" or status == "完成" %}
                            <dt class="info-label first-line">礼品地址：</dt>
                            <dd class="info-element" style="word-wrap: break-word;padding: 5px;">
                                <a href="{{ gift_full_url }}">{{ gift_full_url }}</a>
                                <br>
                                <br>
                                <br>
                            </dd>
                        {% endif %}
                    </dl>
                {% endif %}
                <dl>
                    {% if status == "待支付" %}
                        <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_warn" id="cancel">取消订单</a>
                        <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary" id="continue">继续支付</a>
                    {% elif status == "待发货" %}
                        <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_warn" id="cancel">取消订单</a>
                    {% elif status == "已发货" %}
                        <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_default order-confirm"
                           id="confirm">确认收货</a>
                    {% endif %}
                </dl>
                <div class="btn-area flex-box">
                </div>
                <br>
                <dl class="info-line">
                    <dd class="info-element station-name">物流信息</dd>
                    <dt class="info-label first-line">快递单号：</dt>
                    <dd class="info-element">
                        {% if order_express_no|length > 0 %}
                            {% for foo in order_express_no %}
                                {{ foo }}&nbsp;&nbsp;&nbsp;
                            {% endfor %}
                        {% else %}
                            暂时没有物流信息～
                        {% endif %}

                    </dd>
                </dl>
                <dl class="info-line">
                    <dt class="info-label">邮费：</dt>
                    <dd class="info-element"><span class="highlight price">￥{{ delivery_fee }}</span></dd>
                </dl>

                <dl class="info-line">
                    <dt class="info-label">收货地址：</dt>
                    <dd class="info-element">
                        {% if address %}
                            {{ address.sdef_address_province }} {{ address.sdef_address_city }}
                            {{ address.sdef_address_county }} {{ address.sdef_address_detail }}
                            【{{ address.sdef_address_name }} {{ address.sdef_address_phone }}】
                        {% endif %}
                    </dd>
                </dl>
                <br>
                <dl class="info-line">
                    <dt class="info-label">留言：</dt>
                    <dd class="info-element"><span class="">
                        {% if message %}
                            {{ message }}
                        {% endif %}
                    </span></dd>
                </dl>
                {% if order_express_no|length > 0 %}
                    <br>
                    <dl class="info-line">
                        <dt class="info-label">物流跟踪：</dt>
                        <dd class="info-element" style="color:gray;" id="expressInfo">

                        </dd>
                    </dl>
                {% endif %}
                <br>
                <div class="btn-area flex-box">
                </div>
                <br>
                <br>
                <div class="barcode-area">
                    <dl class="area-title">
                        <dt class="title">商品详情</dt>
                        <dd class="area-tips">非当前商品信息</dd>
                    </dl>

                    <!-- 一维码列表[[ -->
                    <ul class="barcode-list">
                        {% for foo in cart_goods %}
                            <li class="flex-box barcode-img" onclick="location.href='/mall/detail/{{ foo.id }}'">
                                <div style="width: 106px;height: 106px;overflow: hidden;"><img height="106"
                                                                                               src="{{ foo.goods_img }}">
                                </div>

                                <span class="site-num">{{ foo.count }}×{{ foo.goods_price }}</span>
                                <p style="background: white;opacity: 0.6;width:100%;position:absolute;left:0;bottom:0;z-index:2;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;">{{ foo.goods_name }}</p>
                            </li>
                        {% endfor %}
                    </ul>
                    <!-- 一维码列表]] -->
                </div>
                <div class="btn-area flex-box">
                    <a href="javascript:scroll(0,0)" class="cancle-btn flex-1">回到顶部</a>
                    <a href="javascript:history.back()" style="z-index: 100" class="pay-btn flex-1">返回上一页</a>
                </div>
            </li>
        </div>
    </div>
{% endblock %}

{% block footer %}
{% endblock %}

{% block js %}
    <script src="{{ STATIC_URL }}/static/js/mall/order-detail.js?v={{ version_code }}"></script>
    {% if is_wechat %}
        <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
        <script>
            var debug = false;
            var appId = "{{ app_id }}";
            // 时间戳
            var timeStamp = "{{ time_stamp }}";
            // 随机字符串
            var nonceStr = "{{ nonce_str }}";
            var signature = "{{ signature }}";
            var link = "{{ gift_full_url }}";

            $(function () {
                wx.config({
                    debug: debug, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: appId, // 必填，公众号的唯一标识
                    timestamp: timeStamp, // 必填，生成签名的时间戳
                    nonceStr: nonceStr, // 必填，生成签名的随机串
                    signature: signature,// 必填，签名，见附录1
                    jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage"] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                });
                wx.ready(function () {
                    wx.onMenuShareTimeline({
                        title: '送你一份心意', // 分享标题
                        link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                        imgUrl: 'http://wx.style999.com/static/img/logo.png', // 分享图标
                        success: function () {
                            // 用户确认分享后执行的回调函数
                        },
                        cancel: function () {
                            // 用户取消分享后执行的回调函数
                        }
                    });
                    wx.onMenuShareAppMessage({
                        title: '送礼一份心意', // 分享标题
                        desc: '点击完善收货地址', // 分享描述
                        link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                        imgUrl: 'http://wx.style999.com/static/img/logo.png', // 分享图标
                        type: 'link', // 分享类型,music、video或link，不填默认为link
                        dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                        success: function () {
                            // 用户确认分享后执行的回调函数
                        },
                        cancel: function () {
                            // 用户取消分享后执行的回调函数
                        }
                    });
                });
                wx.error(function (res) {
                    alert("调用错误");
                    alert(JSON.stringify(res));
                });

                function showDebug(k, v) {
                    // 显示调试信息
                    var html = "<p>";
                    html += k + ":" + v;
                    html += "</p>";
                    $("#debug").append(html);
                }

                if (debug) {
                    showDebug("appid", appId);
                    showDebug("timeStamp", timeStamp);
                    showDebug("nonceStr", nonceStr);
                    showDebug("signature", signature);
                }
            })
        </script>
    {% endif %}

{% endblock %}